class Enlarge
{
 constructor(el){
    //  1.保存全局信息
this.el=document.querySelector(el)
this.imgObj=this.el.querySelector('.img')
this.maskObj=this.el.querySelector('.mask')
this.enlargeObj=this.el.querySelector('.enlarge')
this.init()

 }

init(){
    // 功能1
    // 鼠标移入移出功能
    this.overOut()
    // 功能2
    // 放大境设置宽高
    this.enlargeSetWH()
    // 功能3
    // 遮盖照移动功能
    this.maskMove()
    // 功能4
    this.enlargeSetBg()
    // 功能5
        this.smallImgChange()

}
overOut(){
  // 左侧图移入
  // 事件处理函数中-遮罩框显示
  this.imgObj.onmouseover = () => this.maskObj.style.display = this.enlargeObj.style.display = 'block'
        this.imgObj.onmouseout = () => this.maskObj.style.display = this.enlargeObj.style.display = 'none'
}

getStyle(tagObj, attrName) 
{
    if (window.getComputedStyle)
    {
        // return window.getComputedStyle(tagObj).attrName
        return window.getComputedStyle(tagObj)[attrName]
    } else {
        // return tagObj.currentStyle.attrName
        return tagObj.currentStyle[attrName]  // 当对象的键是变量时，使用数组语法
    }
}

enlargeSetWH(){
    // 目的：让放大镜显示的内容  和  遮罩框黄色  一样
    // 遮罩层尺寸（黄色）1       放大镜【盒子尺寸】 1
    // ---------------   =     ----------------
    // img盒模型尺寸  2        放大镜【背景尺寸】 2
    // 放大镜【盒子尺寸】=  //遮罩层尺寸（黄色）*( 放大镜背景尺寸/ img盒模型尺寸)
// 获取mask黄色区域的尺寸，宽高
let maskW=parseInt(this.getStyle(this.maskObj, 'width'))
let maskH=parseInt(this.getStyle(this.maskObj, 'height'))
let imgW=this.imgObj.clientWidth
// 不要边框
let imgH=this.imgObj.clientHidth
let enlarge=this.getStyle(this.enlargeObj,'background-size')
let  enlargeW=parseInt(enlarge.split(' ')[0])
let  enlargeH=parseInt(enlarge.split(' ')[1])
this.enlargeObj.style.width=maskW*(enlargeW/imgW)+'px'
this.enlargeObj.style.height=maskH*(enlargeH/imgH)+'px'
}
maskMove(){
//     步骤1：给img盒模型绑定鼠标移动事件
// 步骤2；事件处理函数中
// 2.1 同步mask遮罩框的left和top - 获取事件对象
// 2.2 同步mask遮罩框的left和top - 计算left和top  公式鼠标的pageX - imgObj.offsetLeft  居中
// 2.3 同步mask遮罩框的left和top - 范围判断
// 2.4 同步mask遮罩框的left和top - 设置left和top
this.imgObj.onmousemove=(evt)=>{
let e=evt||window.event
let left=e.pageX-this.imgObj.parentNode.offsetLeft-this.maskObj.offsetWidth/2
let top=e.pageY-this.imgObj.parentNode.offsetTop-this.maskObj.offsetHeight/2
if(left<0)left=0
if(top<0)top=0
let maxLeft=this.imgObj.offsetWidth-this.maskObj.offsetWidth
let maxTop=this.imgObj.offsetHeight-this.maskObj.offsetHeight
if(left>maxLeft)left=maxLeft
if(top>maxTop)top=maxTop
this.maskObj.style.left=left+'px'
this.maskObj.style.top=top+'px'
this.enlargeSetBg(left, top)
}
}
// 背景同步
enlargeSetBg(left, top)
    {
        // div.enlarge bc left =    (div.enlarge w / div.mask w) *  div.mask left
        let enlargeW = parseFloat(this.getStyle(this.enlargeObj, 'width'))
        let enlargeH = parseFloat(this.getStyle(this.enlargeObj, 'height'))
        // console.log(enlargeW, enlargeH);
        
        let maskW = parseInt(this.getStyle(this.maskObj, 'width'))
        let maskH = parseInt(this.getStyle(this.maskObj, 'height'))

        let x = (enlargeW/maskW) * left
        let y = (enlargeH/maskH) * top

        this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`
    }
    
    
smallImgChange(){
    // 步骤1：获取所有smallImgObjs
    // 步骤2：遍历增加点击事件
    // 步骤3：在事件处理函数中（1-改bigImg，2-放大镜图）
// 1. 获取所有小图 遍历绑定 点击事件
    // 2. 事件处理函数中
    //    2.1 移除所有class 给自己加
    //    2.2 大图换
    //    2.3 放大镜换
    let smallImgObjs=this.el.querySelectorAll('ul li')
    smallImgObjs.forEach((item,i) => {
        item.onclick=()=>{
            this.el.querySelector('ul li.active').className=''
            smallImgObjs[i].className='active'
            this.imgObj.style.background=`url(./imgs/${i+1}.jpg)`
            this.enlargeObj.style.background=`url(./imgs/${i+1}.big.jpg)`
        }   
    })
    }
}